<template>
  <div>
    <div class="jd-banner">
      <ul>
        <li :style="{opacity : item.opacity}" v-for="(item, index) in arr" :key="index">
          <img :src="item.src" alt="" />
        </li>
      </ul>
      <ol>
        <li
          :class="{ active: active === index }"
          v-for="(item, index) in arr"
          :key="index"
        >
          <span></span>
        </li>
      </ol>
      <div class="ctrls">
        <a href="#" class="prev" @click="prev">&lt;</a>
        <a href="#" class="next" @click="next">&gt;</a>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      arr: [
        {
          src: "http://127.0.0.1:5501/vue%E9%98%B6%E6%AE%B5%E5%9B%BD%E5%BA%86%E5%81%87%E6%9C%9F%E4%BD%9C%E4%B8%9A/%E7%AC%AC7%E9%A2%98-%E5%AE%9E%E7%8E%B0%E4%BA%AC%E4%B8%9CPC%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE/images/q1.jpg",
          opacity : 1
        },
        {
          src: "http://127.0.0.1:5501/vue%E9%98%B6%E6%AE%B5%E5%9B%BD%E5%BA%86%E5%81%87%E6%9C%9F%E4%BD%9C%E4%B8%9A/%E7%AC%AC7%E9%A2%98-%E5%AE%9E%E7%8E%B0%E4%BA%AC%E4%B8%9CPC%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE/images/q2.jpg",
          opacity : 0
        },
        {
          src: "http://127.0.0.1:5501/vue%E9%98%B6%E6%AE%B5%E5%9B%BD%E5%BA%86%E5%81%87%E6%9C%9F%E4%BD%9C%E4%B8%9A/%E7%AC%AC7%E9%A2%98-%E5%AE%9E%E7%8E%B0%E4%BA%AC%E4%B8%9CPC%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE/images/q3.jpg",
          opacity : 0
        },
        {
          src: "http://127.0.0.1:5501/vue%E9%98%B6%E6%AE%B5%E5%9B%BD%E5%BA%86%E5%81%87%E6%9C%9F%E4%BD%9C%E4%B8%9A/%E7%AC%AC7%E9%A2%98-%E5%AE%9E%E7%8E%B0%E4%BA%AC%E4%B8%9CPC%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE/images/q4.jpg",
          opacity : 0
        },
        {
          src: "http://127.0.0.1:5501/vue%E9%98%B6%E6%AE%B5%E5%9B%BD%E5%BA%86%E5%81%87%E6%9C%9F%E4%BD%9C%E4%B8%9A/%E7%AC%AC7%E9%A2%98-%E5%AE%9E%E7%8E%B0%E4%BA%AC%E4%B8%9CPC%E7%AB%AF%E8%BD%AE%E6%92%AD%E5%9B%BE/images/q5.jpg",
          opacity : 0
        },
      ],
      active: 0,
    };
  },
  methods: {
    prev() {
      this.active--;
      if (this.active < 0) {
        this.active = 4;
      }
      this.arr.forEach(item => item.opacity = 0)
      this.arr[this.active].opacity = 1      
    },
    next() {
      this.active++;
      if (this.active > 4) {
        this.active = 0;
      }
      this.arr.forEach(item => item.opacity = 0)
      this.arr[this.active].opacity = 1      
    },
  },
};
</script>

<style>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}

.jd-banner {
  position: relative;
  width: 590px;
  height: 470px;
  margin: 100px auto;
}

ul li {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
}

ol {
  display: flex;
  position: absolute;
  left: 40px;
  bottom: 30px;
}

ol li {
  padding: 3px;
  border-radius: 50%;
  margin: 0 3px;
  background: rgba(255, 255, 255, 0.2);
}

ol li span {
  display: block;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.6);
  cursor: pointer;
}

ol li.active span {
  background: rgba(255, 255, 255, 1);
}

.ctrls a {
  position: absolute;
  top: 50%;
  width: 30px;
  height: 60px;
  margin-top: -30px;
  line-height: 60px;
  font-size: 24px;
  text-align: center;
  background: rgba(0, 0, 0, 0.3);
  text-decoration: none;
  color: #fff;
  opacity: 0.8;
}

.ctrls a.prev {
  left: 0;
}

.ctrls a.next {
  right: 0;
}
</style>